<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="${pageContext.request.contextPath }" var="path"
	scope="page"></c:set>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>课程介绍</title>
<link rel="shortcut icon" href="/img/head16.ico" type="image/x-icon" />
<link rel="Bookmark icon" href="/img/head16.ico" type="image/x-icon" />
<link rel="stylesheet" href="${path}/static/css/base-new.css">
<link rel="stylesheet" href="${path}/static/css/style-new.css">
<link rel="stylesheet" href="${path}/static/css/style.css">
<link rel="stylesheet" href="${path}/static/css/css623/css623.css">
<link type="text/css" href="${path}/static/css/index.css"
	rel="stylesheet" />
<style type="text/css">
.wrapper {
	box-shadow: -2px 0 5px lightsteelblue, 0 -2px 5px lightsteelblue, 0 2px
		5px lightsteelblue, 2px 0 5px lightsteelblue;
	height: 450px;
	width: 462px;
}

.content {
	display: none;
	width: 461px;
	height: 395px;
	margin-top: 8px;
	box-shadow: -2px 0 5px gray, 0 -2px 5px gray, 0 2px 5px gray, 2px 0 5px
		gray;
}
/*点击该按钮的时候显示该颜色*/
.active {
	background-color: lightsteelblue;
}

button {
	background-color: lightseagreen;
	margin-top: 5px;
	list-style-type: none;
	width: 125px;
	height: 40px;
	font-family: "新宋体";
	font-size: 18px;
	border: none;
	box-shadow: -2px 0 5px lightsteelblue, 0 -2px 5px lightsteelblue, 0 2px
		5px lightsteelblue, 2px 0 5px lightsteelblue;
}

button:first-child {
	margin-left: 10px;
}
</style>

</head>
<body>
	<div id="sidel"></div>
	<div id="sider"></div>
	<div id="frame">
		<div id="outer">
			<div id="header">
				<a href="/index/"><div id="logo"></div></a>
				<div id="contact">
					<c:choose>
						<c:when test="${not empty u}">
							<div>用户: ${u.userName }</div>
						</c:when>
						<c:otherwise>
							<a href="/admin/User/teacherLogin">登录</a>
						</c:otherwise>
					</c:choose>
					<a href="/admin/User/zhuceshow">注册</a> <a href="/admin/User/zhuxiao">注销</a>
				</div>
			</div>
			<div class="clear"></div>
			<div id="navigator">
				<div frag="面板1">
					<div frag="窗口1">
						<div id="wp_nav_w1">
							<ul class="wp_nav"
								data-nav-config="{drop_v: 'down', drop_w: 'right', dir: 'y', opacity_main: '-1', opacity_sub: '-1', dWidth: '0'}">
								<li class="nav-item i1 "><a href="/index/" title="首页"
									target="_self"> <span class="item-name">首页</span></a> <i
									class="mark"></i></li>
								<li class="nav-item i2 "><a href="/admin/declare/ht.do"
									title="精品课程申报"> <span class="item-name">精品课程申报</span></a> <i
									class="mark"></i></li>
								<li class="nav-item i3 "><a
									href="/admin/User/gr.do?userId=${u.userId }"  title="最新通知"
									target="_self"> <span class="item-name">个人信息</span></a> <i
									class="mark"></i></li>
								<li class="nav-item i4 "><a href="/admin/declare/gl.do" title="政策文件"
									target="_self"> <span class="item-name">课程管理</span></a> <i
									class="mark"></i></li>
								<li class="nav-item i5 "><a
									href="/admin/declare/teacherShow.do?userId=${u.userId }"
									title="课程查看" target="_self"> <span class="item-name">课程查看</span></a>
									<i class="mark"></i></li>
								<li class="nav-item i6 "><a href="#" title="工作经验"
									target="_self"> <span class="item-name">工作经验</span></a> <i
									class="mark"></i></li>
								<li class="nav-item i7 "><a href="#" title="表格下载"
									target="_self"> <span class="item-name">表格下载</span></a> <i
									class="mark"></i></li>
								<li class="nav-item i8 "><a href="#" title="相关链接"
									target="_self"> <span class="item-name">相关链接</span></a> <i
									class="mark"></i></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		<!-- 所在位置 -->
		<div class="minwid">
			<div class="cont_n">
				<div class="details-position">
					<!-- <span><a href="http://www.xiangxue8.com/index.html">首页</a> &gt; <a href="http://www.xiangxue8.com/a_indexMoreList.html?stype=course">课程</a> &gt; <a id="ctypeName" href="http://www.xiangxue8.com/a_indexMoreList.html?stype=course&amp;ctypeid=562f1f3b99bf91651845f1f8">幼师培训</a> &gt; <i class="c9"><a id="cname" href="#">幼儿教师资格证（综合素质）考前辅导</a></i></span> -->
				</div>
			</div>
		</div>
		<!-- banner -->
		<div class="banner_1">
			<div class="cour_n blur" id="cour_n"
				style="background-image: url(&quot;/upload/15ba1740-97ff-11e5-9aa1-994822b0e41b.jpg&quot;);"></div>
			<!-- <canvas id="canvas" width="256" height="191"></canvas> -->
			<div class="mask_n"></div>
			<div class="cont_n cour_position">
				<div class="zhengLeft fl">
					<img id="photo" src="../../upload/${ci.teachingResults }" width="197px">
				</div>
				<div class="zhengLeft fr instr_n">
					<div class="instr_box">
						<p id="name">${ci.courseDescription }</p>
						<div class="instro_title">
							<span class="keshi_bg fl">课程时长：<span id="classHour">26</span>学时
							</span> <span class="kecheng_bg fl" style="margin-left: 100px;">课程观看量:
								<span id="credit">${ci.courseNum }
						</div>
						<div class="cf fs14 subzf"
							style="line-height: 25px; padding: 15px 0 20px 0; min-height: 40px;"
							id="des">${ci.teachingLesson }</div>
						<div class="registration shad_b2">
							<span id="pay"><a id="payBtn"
								href="/Info/courseInfos/?courseId=${ci.courseId }&&courseNum=${ci.courseNum }">查看课程</a></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- main -->
		<div class="h_40"></div>
		<div class="cont_n">
			<div class="gongkai-video">
				<!-- 课程介绍 复用-->
				<div class="daP-left fl backff" style="width: 39%;">
					<!--布局样式-->
					<div class="wrapper">
						<!--选项卡-->
						<button class="active">课程介绍</button>
						<button>课程资源</button>

						<div class="content" style="display: block;">
							<p style="text-indent: 30pt;padding: 10px;font-size: 20px;">							
									<span style="font-size: 16px;">${ci.teachingLesson }</span>								
							</p>
						</div>
						<div class="content">
						 <c:choose>
							<c:when test="${not empty cv}">
							<c:forEach items="${cv}" var="cv">
							<div style="font-size: 20px;padding: 10px 30px;text-align: center;">
								<span style="float: left;">${cv.courseWen }</span>
								<span style="float: right;"><a href="/upload/download/?filename=${cv.wenRul }" style="color: #0000EE;">下载</a></span><br/>
							</div>
							</c:forEach>
							</c:when>
							<c:otherwise>
								没查到任何结果
							</c:otherwise>
							</c:choose>
						</div>
					</div>
					<!--JS代码-->
					<script type="text/javascript">
						// 将按钮和盒子拿出来
						var btn = document.getElementsByTagName('button');
						var div = document.getElementsByClassName('content');
						// 每一个button上面绑定事件
						for (var n = 0; n < btn.length; n++) {
							//生成闭包的立即函数
							(function(i) {
								btn[n].onclick = function() {
									for (var m = 0; m < btn.length; m++) {
										btn[m].className = ""; //清空效果
										div[m].style.display = "none";
									}
									//当前点击的button设置变化
									this.className = "active";
									div[i].style.display = "block";
								}
							}(n))
						}
					</script>
					<%-- <div id="kengChenJiaoShao">
						<div class=" box-pl on" style="min-height: 500px; display: block;">
							<div class="kechengJieShao">
								<p id="richDes">
								<p class="" style="text-indent: 30pt;">
									<span style="font-size: 16px;">${ci.muitimedia }</span>
								</p>
								<p class="" style="text-align: center; text-indent: 30pt;">
									<img src="" alt=""><img src="" alt="">
								</p>
								<p class="" style="text-align: center; text-indent: 30pt;">
									<img src="" alt=""><img src="" alt="">
								</p>
								<p class="" style="text-indent: 26.2500pt;">
									&nbsp; &nbsp; <span style="font-size: 16px;"></span>
								</p>
								<p>
									<br>
								</p>
								</p>
							</div>
						</div>
					</div> --%>
				</div>
				<!-- 主讲老师 复用-->
				<div class="cour-art-teacher fr" id="teachersList">
					<div class="daP-list-title">
						<span>主讲教师</span>
					</div>
					<div class="teachEvt cour-box" data-id="562f224899bf91651845f26c">
						<div class="teacher">
							<div class="fl">
								<img src="">
							</div>
							<div class="fl">
								<p style="width: 100px" class="ellipsis">${ci.teacherTeam }</p>
								<p>高级讲师</p>
							</div>
						</div>
						<div class="clear"></div>
						<div class="teacher-intro fs14" style="height: auto">
							<p>${ci.teachingLesson }</p>
						</div>
						<div style="border-bottom: 1px solid #CCCCCC; margin: 10px 20px"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 推荐 -->
		<div class="h_40"></div>
		<div class="cont_n">
			<div class="recommend fs18">为您推荐</div>
			<c:forEach items="${cis}" var="cis">
			<div id="tuijan">
			<a href="/Info/courseDesciption/?courseId=${cis.courseId }&&userId=${u.userId }">
				<div class="box_n addcour singleC"
					data-id="5621d74a628fd1651f8850cc">
					<dl>
						<dt class="singleCa">
							<img src="../../upload/${ci.teachingResults }">
						</dt>
						<dd class="fs16 ellipsis singleCa">${cis.courseDescription }</dd>
						<dd class="c80 ellipsis" style="border-bottom: 1px solid #E6E6E6;">${cis.teachingLesson }</dd>
						<div class="addshouke">
							<span class="teach" style="width: 40px; padding: 0"
								data-tid="562d9b834be326130214e780"><img
								src=""></span>
							<span style="padding-right: 15px">授课老师：${cis.teacherTeam }</span> <span
								style="padding: 0">播放次数：${cis.courseNum }</span>
						</div>
					</dl>
				</div>
				</a>
			</div>
			</c:forEach>
			<div class="clear"></div>
		</div>
		<!-- footer -->

		<!-- end -->
	</div>


	<script>
		IndexStudent.detailCourseFirstInit();

		if (cour_n.isIE()) {
			$("#cour_n").css({
				"backgroundImage" : "none!important"
			}, {
				"backgroundColor" : "#808080!important"
			});
		}
	</script>
</body>
</html>